/* Modal personalizado */
#modal2 .modal.fade .modal-dialog {
    position: fixed;  /* Modal se posiciona de forma fija */
    right: 0;  /* Alineado al borde derecho */
    top: 0;  /* Inicia en la parte superior */
    max-width: 100%;  /* Asegura que el modal ocupe todo el ancho */
    margin-top: 0 !important;
    padding-top: 0 !important;
}


@media (min-width: 768px) {
    #modal2 .modal-dialog {
        width: 30%;  
    }
}

@media (min-width: 992px) {
    #modal2 .modal-dialog {
        width: 25%;  
    }
}

@media (min-width: 1120px) {
    #modal2 .modal-dialog {
        width: 20%;  
    }
}

/* Asegúrate de que los bordes redondeados se apliquen correctamente */
#modal2 .modal,
#modal2 .modal-dialog,
#modal2 .modal-content {
    border-radius: 0px !important;
}

#modal2 .modal-backdrop {
    opacity: 0.5; 
    transition: opacity 0.3s linear; 
}

/* Cuando el modal está abierto, la opacidad del backdrop será de 0.9 */
#modal2 .modal.show .modal-backdrop {
    opacity: 0.9;
}
/* Aparece desde arriba */
#modal2 .modal.fade .modal-dialog {
    transform: translateY(-100%); 
    transition: transform 0.5s ease; 
}

#modal2 .modal.fade.show .modal-dialog {
    transform: translateY(0); 
}


#modal2 .modal-body {
    padding: 0 !important;
}


/* Reducir tamaño del contenido del modal */
#modal2 .modal-content {
    padding: 15px;
}

/* Reducir el tamaño de los inputs */
#modal2 .form-control {
    font-size: 0.875rem; /* Tamaño de fuente más pequeño */
    padding: 6px 10px; /* Reducir padding */
}

/* Reducir el tamaño de los botones */
#modal2 .btn {
    font-size: 0.875rem; /* Reducir el tamaño del texto */
    padding: 6px 12px; /* Reducir padding */
}

/* Reducir el tamaño del enlace "¿Olvidaste tu contraseña?" */
#modal2 .text-end a {
    font-size: 0.75rem;
}

@media (max-width: 576px) { /* Para pantallas pequeñas */
    #modal2 .modal-header {
        display: none; /* Oculta el header */
    }
}


/* Estilo general del modal */
#modal2 .modal-content {
    background-color: #f8f9fa; /* Fondo claro */
    color: #343a40; /* Texto gris oscuro */
    border: 1px solid #ced4da; /* Bordes suaves */
}

/* Estilo del header */
#modal2 .modal-header {
    background-color: #e9ecef; /* Fondo suave y claro */
    border-bottom: 1px solid #ced4da;
}

/* Botón de cerrar */
#modal2 .btn-close {
    filter: invert(1); /* Hace el botón de cerrar blanco */
}

/* Inputs */
#modal2 .form-control {
    background-color: #e9ecef; 
    color: #343a40;
    border: 1px solid #ced4da;
}

#modal2 .form-control::placeholder {
    color: #6c757d; /* Placeholder en gris medio */
}

/* Botón primario (Iniciar Sesión) */
#modal2 .btn-primary {
    background-color: #6c757d;
    border-color: #6c757d;
}

#modal2 .btn-primary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

/* Botón secundario (Crear Cuenta) */
#modal2 .btn-secondary {
    background-color: #495057;
    border-color: #495057;
}

#modal2 .btn-secondary:hover {
    background-color: #3e444a;
    border-color: #3e444a;
}

/* Footer */
#modal2 .modal-footer {
    background-color: #e9ecef;
    border-top: 1px solid #ced4da;
}

/* Enlace de "¿Olvidaste tu contraseña?" */
#modal2 .text-end a {
    color: #6c757d;
    text-decoration: none;
}

#modal2 .text-end a:hover {
    color: #343a40;
}